<!-- eslint-disable max-len -->
<template>
  <a-form-model
    class="detailPaddingPage"
    style="display: flex; flex-direction: column"
    :layout="formLayout"
    :colon="false">
    <!-- 操作信息 -->
    <a-form-model-item :label="$t('operationInfo')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 模板类型 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('templateType') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.instanceResponse.businessName"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 申请人 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('applicant') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.instanceResponse.startUserName"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 申请时间 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('applicationTime') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis
                  :text="formData.instanceResponse.createTime?
                    $options.filters.moment(formData.instanceResponse.createTime):'-'"
                >
                </table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <!-- 备注 -->
        <a-col :md="24" :sm="24">
          <a-row>
            <a-col :md="3" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('remark') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="20" :sm="24">
              <a-form-model-item>
                {{ formData.instanceResponse.remark?formData.instanceResponse.remark:'-' }}
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model-item>
    <!-- 升级策略 -->
    <a-form-model-item :label="$t('sjcl')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 策略名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('policyName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.strategyVo.name"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 车型代码 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('modelCode') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.strategyVo.modelCode"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 车型名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('modelName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.strategyVo.modelName"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 款型代码 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('stereotypeCode') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis
                  :tableEllipsisIsTurnLine="false"
                  :text="formData.vehicleVersionVo.model.trimLevelCode"
                >
                </table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 款型名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('stereotype') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.vehicleVersionVo.model.trimLevel"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 车型版本 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('vehicleModel')+$t('version') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.strategyVo.vehicleVersionName"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 车辆ECU -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('vehicleInfor') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <a @click="showEcuTable=!showEcuTable">{{ showEcuTable?$t('packup'):$t('packdown') }}</a>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data-source="formData.vehicleVersionVo.ecuVersions"
        :pagination="false"
        style="width:90%;marginLeft:5%"
        v-show="showEcuTable">
        <span slot="name1" slot-scope="text,record">{{ record.ecu.name }}</span>
        <span slot="name2" slot-scope="text,record">{{ record.ecu.ecuModuleId }}</span>
        <span slot="softwareCode" slot-scope="text,record">{{ record.ecu.softwareCode }}</span>
        <span slot="versionType" slot-scope="text,record">{{ record.version.versionType }}</span>
        <span slot="name3" slot-scope="text,record">{{ record.version.name }}</span>
        <a slot="name4" slot-scope="text,record" @click="() => showRelease(record)">{{ $t('view') }}</a>
        <span slot="name5" slot-scope="text,record">
          {{ record.version.configVersionName?record.version.configVersionName:'-' }}
        </span>
        <span slot="name6" slot-scope="text,record">
          {{record.groupNo}}
        </span>
        <span slot="name8" slot-scope="text,record">{{ record.ecu.groupUpgradeNo }}</span>
        <span
          slot="isRollback"
          slot-scope="text,record">
          {{record.groupRollback === true ? $t('rollbackYes') : (record.groupRollback === false ? $t('rollbackNo') : '')}}
        </span>
        <span slot="updateOrder" slot-scope="text,record">{{ record.groupUpgradeNo?record.groupUpgradeNo:'-' }}</span>
        <span slot="customTitle">
          {{ $t('dependentGrouping') }}
          <question-mark-tip
            :tip-title="$t('dependentGroupingColumnTip')"
            :popupContainer="getPopupContainerColumn"
          ></question-mark-tip>
        </span>
        <span slot="isRollback">
          {{ $t('isRollback') }}
          <question-mark-tip
            :tip-title="$t('isRollbackColumnTip')"
            :popupContainer="getPopupContainerColumn"
          ></question-mark-tip>
        </span>
        <span slot="updateOrder">
          {{ $t('updateOrder') }}
          <question-mark-tip
            :tip-title="$t('updateOrderColumnTip')"
            :popupContainer="getPopupContainerColumn"
          ></question-mark-tip>
        </span>
      </a-table>
    </a-form-model-item>
    <!-- 条件策略 -->
    <a-form-model-item :label="$t('tjcl')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 策略名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                {{ $t('policyName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formData.conditionStrategyVo.name"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- soc电量 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('socdlTip')" >
                </question-mark-tip>
                {{ $t('socdl') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.lowestSoc || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 蓄电池电压 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('xdcdyTip')" >
                </question-mark-tip>
                {{ $t('xdcdy') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.lowestVoltage || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 倒计时时长(min) -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('djsscTip')" >
                </question-mark-tip>
                {{ $t('djssc') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.countDown || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 可升级温度 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('ksjcwdTip')" >
                </question-mark-tip>
                {{ $t('ksjcwd') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.temperature || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 下载失败次数 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('xzsbcsTip')" >
                </question-mark-tip>
                {{ $t('xzsbcs') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.failureNumber || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 升级失败次数 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                <question-mark-tip :tip-title="$t('sjsbcsTip')" >
                </question-mark-tip>
                {{ $t('sjsbcs') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.upgradeFailureNumber || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <!-- 是否自由烧写 -->
        <!-- <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                {{ $t('sfzysx') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="$t(formDataItems.isFreeBurning === '1' ? 'yes' : 'no')"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col> -->
        <!-- 自由烧写次数 -->
        <!-- <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item
                :colon="false"
                class="deepClass"
              >
                {{ $t('zysxCount') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item
                :colon="false"
                prop="countDown"
              >
                <table-ellipsis :text="formDataItems.freeBurningTime || '-'"></table-ellipsis>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col> -->
      </a-row>
    </a-form-model-item>
    <!-- 测试结果 -->
    <a-form-model-item :label="$t('testResult')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 全部车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('测试报告') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <FileUploader v-model="testReportFile" read-only/>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 全部车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('allVehicles') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.totalVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 成功车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('successfulVehicle') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.successVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 失败车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('failedVehicle') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.failVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 进行中车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('vehicleInProgress') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.runningVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 未开始车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('vehicleNotStarted') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.notStartVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 已暂停车辆 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('suspendedVehicle') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.pausedVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!--  未完成车辆(台) -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('unfinishedVehicle') + '(' + $t('tai') + ')' }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.taskUpgradeStatisticsVo.notCompleteVehicle"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model-item>
    <view-release-note
      ref="releaseNote"
      :width="600"
      :releaseNotes="releaseNotes || {}"
    >
    </view-release-note>
  </a-form-model>
</template>
<script>
import ViewReleaseNote from '@/views/components/ViewReleaseNote'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { ecuTableColumns, initFormDataStrategy, yesOrNoEnumArr } from '../config/list'
import FileUploader from '@/components/Upload/FileUploader'
import fileApi from '@/api/modules/system/fileUpload'

export default {
  components: { TableEllipsis, QuestionMarkTip, ViewReleaseNote, FileUploader },
  data () {
    return {
      formLayout: 'horizontal',
      showEdit: false,
      data: [],
      columns: ecuTableColumns,
      showEcuTable: true,
      formData: { ...initFormDataStrategy },
      releaseNotes: null,
      ecuVersionQueruId: null,
      yesOrNoEnumArr,
      formDataItems: {},
      testReportFile: [],
    }
  },
  mounted () {
    this.getApplicationDetail()
  },
  methods: {
    // 点击查看发布说明
    showRelease (version) {
      this.$api.versionInfor({ id: version.versionId }).then(response => {
        this.releaseNotes = {
          description: response.data.description,
          functionAddition: response.data.functionAddition,
          functionOptimization: response.data.functionOptimization,
          acknowledgements: response.data.acknowledgements
        }
      }).finally(
        this.$refs.releaseNote.visible = true
      )
    },
    // 防止tooltip弹窗错位
    getPopupContainerColumn () {
      return document.body
    },
    // 获取申请内容详情
    getApplicationDetail () {
      this.$api.getStrategyApplicationDetail({
        id: this.$route.query.key,
        instanceId: this.$route.query.id
      }).then((res) => {
        this.formData = res.data
        fileApi.getFileInfo(this.formData.testReportFileId).then(res => {
          this.testReportFile = res.data;
        });
        if (this.formData.conditionStrategyVo.items.length > 0) {
          const obj = {}
          this.formData.conditionStrategyVo.items.forEach(item => {
            obj[item.code] = item.value
          })
          this.formDataItems = obj
        }
        this.ecuVersionQueruId = res.data.vehicleVersionVo.id
      })
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .ant-form-item{
margin-bottom: 8px ;
}
::v-deep .deepClass{
    font-weight: 600;
    margin-right: 38px;
    text-align: right;

}
::v-deep .ant-form-item-label {
    font-weight: 600;
    margin-right: 12px;
}
  .customFormModelItem2 {
      ::v-deep .ant-form-item-label {
        &::before {
          display: inline-block;
          content: '';
          width: 6px;
          background-color: rgba(67, 136, 166, 1);
          height: 14px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }
</style>
